<template>
  <div class="container coupon">
    <!-- <van-nav-bar
      title="查找店铺"
    /> -->
    <van-search
      v-model.trim="ShopName"
      placeholder="请输入店铺名称"
      @search="onSearch"
    />
    <van-dropdown-menu active-color="#ee0a24">
      <van-dropdown-item v-model="Floor" :options="FloorOption" @change="floorChange" />
      <van-dropdown-item v-model="ShopType" :options="ShopTypeOption" @change="shopTypeChange" />
    </van-dropdown-menu>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="coupon-list-row">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多数据了"
          :error.sync="error"
          error-text="请求失败，点击重新加载"
          @load="getMyCoupon"
        >
        <div v-for="(item,index) in shopList" :key="index">
          <router-link :to="{name:'shopDetail',query:{shopId: item.Id}}" >
          <div class="flex coupon-list" >
            <div class="shop-pic">
                <van-image
                  width="2.133333rem"
                  height="2.133333rem"
                  fit="cover"
                  :src="item.HeadUrl"
                  error="@/assets/logo.jpg"
                />
            </div>
            <div class="flex-1">
              <div class="coupon-name">{{item.UserName}}</div>
              <div class="shop-info">
                <span>{{item.ShopType}}</span>
              </div>
              <div class="shop-info">
                <van-icon name="location-o" />{{item.Address}}
              </div>
            </div>
          </div>
          </router-link>
          </div>
        </van-list>
      </div>
    </van-pull-refresh>
  </div>
</template>


<script>
//import { msToDate } from '@/until/until';
import img from '@/assets/logo.jpg';
export default {
  name: 'coupon',
  data() {
    return {
      isLoading: false,
      loading: false,
      finished: false,
      error: false,
      shopList:[],
      ShopName:"",
      pageIndex:0,
      pageSize:10,
      Floor: 0,
      ShopType: '',
      FloorOption: [
        { text: '全部楼层', value: 0 },
        { text: '1F', value: 1 },
        { text: '2F', value: 2 },
        { text: '3F', value: 3 },
        { text: '4F', value: 4 }
      ],
      ShopTypeOption: [{ text: '全部类型', value: '' }]
    };
  },
  mounted() {
    //const rs = await this.$api.mine.getAllShopTypes();
    //console.log(rs)
    this.getAllShopTypes()
  },
  methods: {
     onClickLeft() {
      this.$router.go(-1);
    },
    onRefresh() {
      setTimeout(() => {
        this.pageIndex = 0;
        this.getMyCoupon();
        this.$toast('刷新成功');
        this.isLoading = false;
        this.finished = false;
      }, 500);
    },
    getMyCoupon(){
      this.$api.mine.getShopUserList({   
          PageIndex:++this.pageIndex,
          PageSize:this.pageSize,
          ShopName:this.ShopName,
          Floor:this.Floor,
          ShopType:this.ShopType
      }).then(res=> {
        this.loading = false;
        let data = res.Data;
        for(let i=0;i<data.Data.length;i++){
          if(data.Data[i].HeadUrl == ''){
            data.Data[i].HeadUrl = img
          }
        }
        if(data.PageIndex==1){
          this.shopList = data.Data;
        }else{
          this.shopList = this.shopList.concat(data.Data);
        }
        if (this.shopList.length >= data.TotalNum) {
          this.finished = true;
        }
      }).catch(() => {
        this.error = true;
      }) 
    },
    onSearch(){
      this.pageIndex = 0;
      this.getMyCoupon()
    },
    getAllShopTypes(){
      this.$api.mine.getAllShopTypes().then(res=> {
        if(res.IsSuccess){
          for(let i=0;i<res.Data.length;i++){
            let o = { text: res.Data[i], value: res.Data[i] };
            this.ShopTypeOption.push(o);
          }
        }
      })    
    },
    floorChange(){
      this.pageIndex = 0;
      this. getMyCoupon();
    },
    shopTypeChange(){
      this.pageIndex = 0;
      this. getMyCoupon();
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.coupon {
  height: auto;
  .coupon-list-row {
    padding: .533333rem .266667rem;
    .coupon-list {
      border: 1px solid #ddd;
      border-radius: 4px;
      background-color: #fff;
      padding: .266667rem;
      margin-bottom: .266667rem;
      .shop-pic {
        width:2.133333rem;
        height: 2.133333rem;
        border:1px solid #ddd;
        margin-right: .266667rem;
        .img {
          width:2.133333rem;
          height: 2.133333rem;
        }
      }
      .shop-info {
        margin-top: .266667rem;
        font-size: .32rem;
        color: #999;
      }
      .coupon-name {
        font-size: .426667rem;
        margin-top: .133333rem;
        color: #333;
      }
      .text {
        font-size: .32rem;
        color: #999;
      }
    }
  }
}
</style>